<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二手易购 - 我的订单</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
  <style>
    /* 全局样式 */
    :root {
      --primary: #1a1a1a;
      --secondary: #333333;
      --accent: #666666;
      --light: #f5f5f5;
      --white: #ffffff;
      --dark: #000000;
      --light-gray: #e0e0e0;
      --medium-gray: #999999;
      --success: #28a745;
      --error: #dc3545;
      --warning: #ffc107;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      --transition: all 0.2s ease;
      --blue: #1890ff;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #f8f9fa 0%, #eef0f2 100%);
      color: var(--dark);
      min-height: 100vh;
      padding-bottom: 80px;
    }

    /* 顶部导航栏 */
    .navbar {
      background: var(--white);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      padding: 12px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .logo {
      display: flex;
      align-items: center;
      transform-origin: left center;
    }

    .logo:hover {
      transform: scale(1.03);
    }

    .logo h1 {
      font-size: 22px;
      font-weight: 700;
      color: var(--dark);
      margin-left: 8px;
      letter-spacing: -0.5px;
    }

    .logo i {
      font-size: 24px;
      color: var(--accent);
    }

    .nav-links {
      display: flex;
      gap: 20px;
    }

    .nav-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      color: var(--dark);
      font-size: 13px;
      transition: var(--transition);
      position: relative;
      padding: 4px 8px;
      border-radius: 6px;
    }

    .nav-link i {
      font-size: 18px;
      margin-bottom: 3px;
    }

    .nav-link:hover {
      color: var(--accent);
      background-color: rgba(0, 0, 0, 0.03);
    }

    .nav-link.active {
      color: var(--dark);
      background-color: rgba(0, 0, 0, 0.05);
      font-weight: 600;
    }

    .user-menu {
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
    }

    .user-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-left: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .user-avatar i {
      font-size: 18px;
      color: var(--accent);
    }

    .dropdown-menu {
      position: absolute;
      top: 50px;
      right: 0;
      background: var(--white);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
      border-radius: 10px;
      width: 180px;
      overflow: hidden;
      display: none;
      z-index: 1000;
    }

    .dropdown-menu.show {
      display: block;
    }

    .dropdown-item {
      padding: 10px 16px;
      display: flex;
      align-items: center;
      text-decoration: none;
      color: var(--dark);
      transition: var(--transition);
      position: relative;
      font-size: 14px;
    }

    .dropdown-item:hover {
      background-color: rgba(0, 0, 0, 0.05);
      padding-left: 20px;
    }

    .dropdown-item:hover::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 3px;
      background: var(--dark);
    }

    .dropdown-item i {
      margin-right: 8px;
      width: 18px;
      text-align: center;
      font-size: 14px;
    }

    .divider {
      height: 1px;
      background-color: var(--light-gray);
      margin: 4px 0;
    }

    /* 内容区域 */
    .container {
      max-width: 1300px;
      margin: 25px auto;
      padding: 0 20px;
    }

    /* 页面标题 */
    .page-title {
      margin: 35px 0 30px;
      position: relative;
    }

    .page-title h2 {
      font-size: 32px;
      font-weight: 800;
      letter-spacing: -1px;
      margin-bottom: 12px;
    }

    .page-title p {
      font-size: 17px;
      color: var(--medium-gray);
      max-width: 550px;
      line-height: 1.6;
    }

    .page-title::after {
      content: '';
      position: absolute;
      bottom: -18px;
      left: 0;
      width: 90px;
      height: 3px;
      background: var(--dark);
      border-radius: 2px;
    }

    /* 订单选项卡 */
    .tabs {
      display: flex;
      border-bottom: 1px solid var(--light-gray);
      margin-bottom: 15px;
      justify-content: space-between;
    }

    .tabs-container {
      display: flex;
    }

    .tab {
      padding: 15px 25px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      color: var(--medium-gray);
      position: relative;
      transition: var(--transition);
    }

    .tab.active {
      color: var(--dark);
    }

    .tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--dark);
    }

    .tab-badge {
      background: var(--accent);
      color: var(--white);
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: 8px;
    }

    .sort-controls {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sort-btn {
      background: var(--white);
      border: 1px solid var(--light-gray);
      border-radius: 8px;
      padding: 8px 15px;
      font-size: 14px;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .sort-btn:hover {
      background: var(--light);
      border-color: var(--medium-gray);
    }

    .sort-btn.active {
      background: var(--dark);
      color: var(--white);
      border-color: var(--dark);
    }

    /* 订单卡片 */
    .order-card {
      background: var(--white);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 25px;
      transition: var(--transition);
      position: relative;
    }

    .order-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

    .order-time-stamp {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 12px;
      z-index: 2;
    }

    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid var(--light-gray);
      background: linear-gradient(to right, #f9f9f9, #f0f0f0);
    }

    .order-id {
      font-size: 16px;
      font-weight: 600;
      color: var(--dark);
    }

    .order-id span {
      color: var(--accent);
      font-weight: 500;
    }

    .order-date {
      font-size: 14px;
      color: var(--medium-gray);
    }

    .order-status {
      padding: 6px 15px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
    }

    .status-processing {
      background: rgba(24, 144, 255, 0.1);
      color: #1890ff;
    }

    .status-completed {
      background: rgba(82, 196, 26, 0.1);
      color: #52c41a;
    }

    .status-cancelled {
      background: rgba(140, 140, 140, 0.1);
      color: #8c8c8c;
    }

    .order-body {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .product-info {
      display: flex;
      gap: 15px;
      flex: 1;
      min-width: 300px;
    }

    .product-image {
      width: 100px;
      height: 100px;
      border-radius: 10px;
      overflow: hidden;
      background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .product-image:hover img {
      transform: scale(1.05);
    }

    .product-details {
      flex: 1;
    }

    .product-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 8px;
    }

    .product-category {
      font-size: 14px;
      color: var(--medium-gray);
      margin-bottom: 10px;
    }

    .product-description {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .product-price {
      font-size: 18px;
      font-weight: 800;
      color: var(--dark);
    }

    .order-details {
      min-width: 250px;
      border-left: 1px solid var(--light-gray);
      padding-left: 20px;
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .detail-label {
      color: var(--medium-gray);
      font-size: 15px;
      font-weight: 500;
    }

    .detail-value {
      color: var(--dark);
      font-size: 15px;
      font-weight: 600;
      text-align: right;
    }

    .total-price {
      font-size: 20px;
      font-weight: 800;
      color: var(--dark);
    }

    .order-footer {
      display: flex;
      justify-content: flex-end;
      padding: 15px 20px;
      border-top: 1px solid var(--light-gray);
      background: rgba(0, 0, 0, 0.02);
    }

    .action-btn {
      padding: 10px 20px;
      border-radius: 8px;
      background: var(--white);
      color: var(--dark);
      border: 1px solid var(--light-gray);
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      margin-left: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .action-btn:hover {
      background: var(--dark);
      color: var(--white);
      border-color: var(--dark);
    }

    .action-btn.primary {
      background: var(--dark);
      color: var(--white);
      border-color: var(--dark);
    }

    .action-btn.primary:hover {
      background: #111;
    }

    .action-btn.danger {
      background: var(--white);
      color: var(--error);
      border-color: var(--light-gray);
    }

    .action-btn.danger:hover {
      background: var(--error);
      color: var(--white);
    }

    /* 空订单状态 */
    .empty-orders {
      padding: 60px 30px;
      text-align: center;
      background: var(--white);
      border-radius: 16px;
      box-shadow: var(--shadow);
      animation: fadeIn 0.8s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .empty-orders i {
      font-size: 80px;
      color: var(--light-gray);
      margin-bottom: 20px;
      opacity: 0.5;
    }

    .empty-orders h4 {
      font-size: 24px;
      color: var(--dark);
      margin-bottom: 15px;
      font-weight: 700;
    }

    .empty-orders p {
      color: var(--medium-gray);
      margin-bottom: 30px;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }

    .empty-orders .btn {
      padding: 12px 30px;
      border-radius: 8px;
      background: var(--dark);
      color: var(--white);
      border: none;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      display: inline-block;
      text-decoration: none;
    }

    .empty-orders .btn:hover {
      background: #111;
      transform: translateY(-3px);
      box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    }

    /* 等待买家提示 */
    .waiting-hint {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      background: rgba(24, 144, 255, 0.1);
      color: #1890ff;
      border-radius: 8px;
      font-weight: 600;
      margin-left: 10px;
    }

    .waiting-hint i {
      margin-right: 8px;
    }

    /* 模态框样式 */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      backdrop-filter: blur(5px);
    }

    .modal-content {
      background: var(--white);
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
      width: 90%;
      max-width: 700px;
      max-height: 90vh;
      overflow-y: auto;
      animation: modalAppear 0.3s ease;
    }

    @keyframes modalAppear {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .modal-header {
      padding: 20px;
      border-bottom: 1px solid var(--light-gray);
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      background: var(--white);
      z-index: 10;
    }

    .modal-header h3 {
      font-size: 22px;
      font-weight: 700;
    }

    .close-btn {
      background: none;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
    }

    .close-btn:hover {
      background: var(--light-gray);
    }

    .modal-body {
      padding: 25px;
    }

    .detail-section {
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--light-gray);
    }

    .detail-section:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .detail-section h4 {
      font-size: 18px;
      margin-bottom: 15px;
      color: var(--dark);
      position: relative;
      padding-left: 10px;
    }

    .detail-section h4::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 18px;
      background: var(--dark);
      border-radius: 2px;
    }

    .modal-footer {
      padding: 15px 20px;
      border-top: 1px solid var(--light-gray);
      display: flex;
      justify-content: flex-end;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .order-body {
        flex-direction: column;
      }

      .order-details {
        border-left: none;
        border-top: 1px solid var(--light-gray);
        padding-left: 0;
        padding-top: 20px;
      }

      .product-info {
        min-width: 100%;
      }

      .order-footer {
        flex-wrap: wrap;
        gap: 10px;
      }

      .action-btn {
        flex: 1;
        text-align: center;
        justify-content: center;
        margin-left: 0;
        margin-top: 5px;
      }

      .tabs {
        flex-direction: column;
        gap: 10px;
      }

      .tabs-container {
        width: 100%;
        overflow-x: auto;
      }

      .sort-controls {
        width: 100%;
        justify-content: flex-end;
      }
    }

    @media (max-width: 576px) {
      .navbar {
        padding: 12px 15px;
      }

      .nav-links {
        gap: 8px;
      }

      .nav-link {
        padding: 4px 6px;
        font-size: 12px;
      }

      .nav-link i {
        font-size: 16px;
      }

      .logo h1 {
        font-size: 18px;
      }

      .page-title h2 {
        font-size: 26px;
      }

      .page-title p {
        font-size: 15px;
      }

      .tab {
        padding: 10px 15px;
        font-size: 14px;
      }

      .sort-btn {
        padding: 6px 10px;
        font-size: 12px;
      }

      .order-time-stamp {
        top: 10px;
        right: 10px;
        font-size: 10px;
      }
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 顶部导航栏 -->
  <nav class="navbar">
    <div class="logo">
      <i class="fas fa-recycle"></i>
      <h1>二手易购</h1>
    </div>

    <div class="nav-links">
      <a href="productPage.html" class="nav-link">
        <i class="fas fa-home"></i>
        <span>首页</span>
      </a>
      <a href="my-goods.html" class="nav-link">
        <i class="fas fa-box"></i>
        <span>我的商品</span>
      </a>
      <a href="orders.html" class="nav-link active">
        <i class="fas fa-file-invoice"></i>
        <span>订单</span>
      </a>
      <a href="my-comments.html" class="nav-link">
        <i class="fas fa-comment-alt"></i>
        <span>评论</span>
      </a>
      <a href="cart.html" class="nav-link">
        <i class="fas fa-shopping-cart"></i>
        <span>购物车</span>
      </a>
    </div>

    <div class="user-menu" id="userMenu" @click="toggleDropdown">
      <span id="usernameDisplay">{{ userInfo.username }}</span>
      <div class="user-avatar">
        <i class="fas fa-user"></i>
      </div>
      <div class="dropdown-menu" id="dropdownMenu" :class="{show: dropdownVisible}">
        <a href="profile.html" class="dropdown-item" id="profileLink">
          <i class="fas fa-user-circle"></i>个人中心
        </a>
        <div class="divider"></div>
        <a href="#" class="dropdown-item" id="logoutLink" @click.prevent="logout">
          <i class="fas fa-sign-out-alt"></i>退出登录
        </a>
      </div>
    </div>
  </nav>

  <!-- 主内容区域 -->
  <div class="container">
    <!-- 页面标题 -->
    <div class="page-title">
      <h2>我的订单</h2>
      <p>管理您买到的和卖出的所有交易记录</p>
    </div>

    <!-- 订单选项卡和排序控件 -->
    <div class="tabs">
      <div class="tabs-container">
        <div class="tab active" :class="{active: activeTab === 'bought'}" @click="switchTab('bought')">
          我买到的 <span class="tab-badge">{{ boughtOrders.length }}</span>
        </div>
        <div class="tab" :class="{active: activeTab === 'sold'}" @click="switchTab('sold')">
          我卖出的 <span class="tab-badge">{{ soldOrders.length }}</span>
        </div>
      </div>

      <div class="sort-controls">
        <button class="sort-btn" :class="{active: sortOrder === 'desc'}" @click="setSortOrder('desc')">
          <i class="fas" :class="sortOrder === 'desc' ? 'fa-arrow-down-wide-short' : 'fa-arrow-down-short-wide'"></i>
          最新优先
        </button>
        <button class="sort-btn" :class="{active: sortOrder === 'asc'}" @click="setSortOrder('asc')">
          <i class="fas" :class="sortOrder === 'asc' ? 'fa-arrow-up-wide-short' : 'fa-arrow-up-short-wide'"></i>
          最早优先
        </button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="empty-orders">
      <i class="fas fa-spinner fa-spin"></i>
      <h4>加载中...</h4>
      <p>正在获取您的订单信息，请稍候</p>
    </div>

    <!-- 订单详情模态框 -->
    <div class="modal" v-if="showModal" @click.self="closeModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>订单详情</h3>
          <button class="close-btn" @click="closeModal">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <div class="modal-body" v-if="currentOrder">
          <div class="detail-section">
            <h4>基本信息</h4>
            <div class="detail-row">
              <span class="detail-label">订单编号:</span>
              <span class="detail-value">{{ currentOrder.oId }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">创建时间:</span>
              <span class="detail-value">{{ formatDate(currentOrder.oCreateTime) }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">订单状态:</span>
              <span class="detail-value">{{ currentOrder.oStatus }}</span>
            </div>
          </div>

          <div class="detail-section">
            <h4>商品信息</h4>
            <div class="detail-row">
              <span class="detail-label">商品名称:</span>
              <span class="detail-value">{{ currentOrder.productName }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">商品分类:</span>
              <span class="detail-value">{{ currentOrder.category }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">商品描述:</span>
              <span class="detail-value">{{ currentOrder.description }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">商品单价:</span>
              <span class="detail-value">¥{{ formatPrice(currentOrder.productPrice) }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">数量:</span>
              <span class="detail-value">{{ calculateQuantity(currentOrder) }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">订单金额:</span>
              <span class="detail-value">¥{{ formatPrice(currentOrder.oTotalAmount) }}</span>
            </div>
          </div>

          <div class="detail-section">
            <h4>交易信息</h4>
            <div class="detail-row">
              <span class="detail-label">卖家:</span>
              <span class="detail-value">{{ currentOrder.sellerName }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">买家:</span>
              <span class="detail-value">{{ currentOrder.buyerName }}</span>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button class="action-btn" @click="closeModal">
            <i class="fas fa-times"></i> 关闭
          </button>
        </div>
      </div>
    </div>

    <!-- 我买到的订单 -->
    <div v-else-if="activeTab === 'bought'">
      <div v-if="boughtOrders.length === 0" class="empty-orders">
        <i class="fas fa-file-invoice"></i>
        <h4>暂无购买记录</h4>
        <p>您还没有购买任何商品，快去挑选心仪的商品吧！</p>
        <a href="productPage.html" class="btn">去逛逛</a>
      </div>

      <div v-for="order in sortedBoughtOrders" :key="order.oId" class="order-card">
        <div class="order-header">
          <div>
            <div class="order-id">订单编号: <span>{{ order.oId }}</span></div>
            <div class="order-date">创建时间: {{ formatDate(order.oCreateTime) }}</div>
          </div>
          <div class="order-status" :class="getStatusClass(order.oStatus)">
            {{ order.oStatus }}
          </div>
        </div>

        <div class="order-body">
          <div class="product-info">
            <div class="product-image">
              <img :src="order.productImage || 'https://via.placeholder.com/300x300?text=Product'" :alt="order.productName">
            </div>
            <div class="product-details">
              <h3 class="product-name">{{ order.productName || '商品名称' }}</h3>
              <div class="product-category">{{ order.category || '商品分类' }}</div>
              <div class="product-description">{{ order.description || '商品描述' }}</div>
              <div class="product-price">¥{{ formatPrice(order.productPrice) }}</div>
            </div>
          </div>

          <div class="order-details">
            <div class="detail-row">
              <span class="detail-label">数量:</span>
              <span class="detail-value">
                {{ calculateQuantity(order) }}
              </span>
            </div>
            <div class="detail-row">
              <span class="detail-label">运费:</span>
              <span class="detail-value">¥0.00</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">优惠:</span>
              <span class="detail-value">-¥0.00</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">总价:</span>
              <span class="detail-value total-price">¥{{ formatPrice(order.oTotalAmount) }}</span>
            </div>
          </div>
        </div>

        <div class="order-footer">
          <button class="action-btn" @click="viewOrderDetails(order.oId)">
            <i class="fas fa-eye"></i> 查看详情
          </button>

          <template v-if="order.oStatus === '进行中'">
            <button class="action-btn danger" @click="cancelOrder(order.oId, order.oTotalAmount)">
              <i class="fas fa-times"></i> 取消订单
            </button>
            <button class="action-btn primary" @click="confirmOrder(order.oId)">
              <i class="fas fa-truck"></i> 确认收货
            </button>
          </template>

          <button v-if="order.oStatus === '已取消'" class="action-btn">
            <i class="fas fa-redo"></i> 重新购买
          </button>
        </div>
      </div>
    </div>

    <!-- 我卖出的订单 -->
    <div v-else-if="activeTab === 'sold'">
      <div v-if="soldOrders.length === 0" class="empty-orders">
        <i class="fas fa-file-invoice"></i>
        <h4>暂无销售记录</h4>
        <p>您还没有卖出任何商品，快去发布您的闲置物品吧！</p>
        <a href="my-goods.html" class="btn">去发布</a>
      </div>

      <div v-for="order in sortedSoldOrders" :key="order.oId" class="order-card">
        <div class="order-header">
          <div>
            <div class="order-id">订单编号: <span>{{ order.oId }}</span></div>
            <div class="order-date">创建时间: {{ formatDate(order.oCreateTime) }}</div>
          </div>
          <div class="order-status" :class="getStatusClass(order.oStatus)">
            {{ order.oStatus }}
          </div>
        </div>

        <div class="order-body">
          <div class="product-info">
            <div class="product-image">
              <img :src="order.productImage || 'https://via.placeholder.com/300x300?text=Product'" :alt="order.productName">
            </div>
            <div class="product-details">
              <h3 class="product-name">{{ order.productName || '商品名称' }}</h3>
              <div class="product-category">{{ order.category || '商品分类' }}</div>
              <div class="product-price">¥{{ formatPrice(order.productPrice) }}</div>
            </div>
          </div>

          <div class="order-details">
            <div class="detail-row">
              <span class="detail-label">数量:</span>
              <span class="detail-value">
                {{ calculateQuantity(order) }}
              </span>
            </div>
            <div class="detail-row">
              <span class="detail-label">运费:</span>
              <span class="detail-value">¥0.00</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">收入:</span>
              <span class="detail-value">¥{{ formatPrice(order.oTotalAmount) }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">平台费:</span>
              <span class="detail-value">¥0.00</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">实际收入:</span>
              <span class="detail-value total-price">¥{{ formatNetAmount(order.oTotalAmount) }}</span>
            </div>
          </div>
        </div>

        <div class="order-footer">
          <button class="action-btn" @click="viewOrderDetails(order.oId)">
            <i class="fas fa-eye"></i> 查看详情
          </button>

          <div v-if="order.oStatus === '进行中'" class="waiting-hint">
            <i class="fas fa-clock"></i> 等待买家收货
          </div>

          <button v-if="order.oStatus === '已完成'" class="action-btn">
            <i class="fas fa-star"></i> 查看评价
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      userInfo: null,
      activeTab: 'bought',
      boughtOrders: [],
      soldOrders: [],
      loading: true,
      dropdownVisible: false,
      showModal: false,
      currentOrder: null,
      sortOrder: 'desc' // 默认降序排列
    },
    computed: {
      // 计算排序后的买家订单
      sortedBoughtOrders() {
        return this.sortOrders(this.boughtOrders);
      },
      // 计算排序后的卖家订单
      sortedSoldOrders() {
        return this.sortOrders(this.soldOrders);
      }
    },
    mounted() {
      this.loadUserInfo();
      this.loadBoughtOrders();
      this.loadSoldOrders();
    },
    methods: {
      // 加载用户信息
      loadUserInfo() {
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        if (!userInfo || !userInfo.userId) {
          window.location.href = 'login.html';
          return;
        }
        this.userInfo = userInfo;
      },

      // 排序订单函数
      sortOrders(orders) {
        return [...orders].sort((a, b) => {
          const dateA = new Date(a.oCreateTime);
          const dateB = new Date(b.oCreateTime);
          return this.sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
        });
      },

      // 设置排序顺序
      setSortOrder(order) {
        this.sortOrder = order;
      },

      // 查看订单详情
      async viewOrderDetails(orderId) {
        try {
          const response = await axios.get(`/ordersManagement/detail/${orderId}`);
          this.currentOrder = response.data;
          this.showModal = true;
        } catch (error) {
          console.error('获取订单详情失败:', error);
          alert('获取订单详情失败，请稍后重试');
        }
      },

      // 计算商品数量
      calculateQuantity(order) {
        // 确保价格有效
        const price = parseFloat(order.productPrice);
        const total = parseFloat(order.oTotalAmount);

        if (isNaN(price)) return 1;
        if (price <= 0) return 1;

        // 计算数量（四舍五入取整）
        const quantity = total / price;
        return Math.round(quantity);
      },

      // 加载买家订单
      async loadBoughtOrders() {
        try {
          this.loading = true;
          const response = await axios.get(`/ordersManagement/buyer/${this.userInfo.userId}`);
          this.boughtOrders = response.data;
        } catch (error) {
          console.error('获取买家订单失败:', error);
          alert('获取订单失败，请稍后重试');
        } finally {
          this.loading = false;
        }
      },

      // 加载卖家订单
      async loadSoldOrders() {
        try {
          this.loading = true;
          const response = await axios.get(`/ordersManagement/seller/${this.userInfo.userId}`);
          this.soldOrders = response.data;
        } catch (error) {
          console.error('获取卖家订单失败:', error);
          alert('获取订单失败，请稍后重试');
        } finally {
          this.loading = false;
        }
      },

      // 获取所有订单
      getAllOrders() {
        return [...this.boughtOrders, ...this.soldOrders];
      },

      // 切换标签页
      switchTab(tab) {
        this.activeTab = tab;
      },

      // 获取状态对应的CSS类
      getStatusClass(status) {
        switch(status) {
          case '进行中': return 'status-processing';
          case '已完成': return 'status-completed';
          case '已取消': return 'status-cancelled';
          default: return '';
        }
      },

      // 格式化价格 (处理BigDecimal)
      formatPrice(price) {
        if (!price) return '0.00';
        // 将BigDecimal转为字符串再处理
        return parseFloat(price.toString()).toFixed(2);
      },

      // 计算实际收入
      formatNetAmount(price) {
        if (!price) return '0.00';
        const amount = parseFloat(price);
        return amount.toFixed(2);
      },

      // 格式化日期
      formatDate(dateString) {
        if (!dateString) return '';
        const date = new Date(dateString);
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      },

      // 取消订单
      async cancelOrder(orderId, amount) {
        if (!confirm(`确定要取消这个订单吗？¥${this.formatPrice(amount)} 将退还到您的账户`)) {
          return;
        }

        try {
          const response = await axios.post(`/ordersManagement/cancel/${orderId}`);
          alert(response.data);
          this.loadBoughtOrders(); // 刷新买家订单列表
        } catch (error) {
          console.error('取消订单失败:', error);
          alert('取消订单失败，请稍后重试');
        }
      },

      // 确认收货
      async confirmOrder(orderId) {
        if (!confirm('确认收到商品无误？确认后将完成交易')) {
          return;
        }

        try {
          const response = await axios.post(`/ordersManagement/confirm/${orderId}`);
          alert(response.data);
          this.loadBoughtOrders(); // 刷新买家订单列表
        } catch (error) {
          console.error('确认收货失败:', error);
          alert('确认收货失败，请稍后重试');
        }
      },

      // 切换下拉菜单显示
      toggleDropdown() {
        this.dropdownVisible = !this.dropdownVisible;
      },

      // 退出登录
      logout() {
        localStorage.removeItem('userInfo');
        window.location.href = 'login.html';
      },

      // 关闭模态框
      closeModal() {
        this.showModal = false;
        this.currentOrder = null;
      }
    }
  });
</script>
</body>
</html>